// import React from 'react';
// import '@/App.css'
// import lessStyles from './app.less'
// import scssStyles from './app.scss'
// import stylStyles from './app.styl'
// function App() {
//     return <div>
//         <h2>webpack5-react-ts</h2>
//         <div className={lessStyles['lessBox']}>
//             <div className={lessStyles['box']}>lessBox</div>
//         </div>
//         <div className={scssStyles['scssBox']}>
//             <div className={scssStyles['box']}>scssBox</div>
//         </div>
//         <div className={stylStyles['stylBox']}>
//             <div className={stylStyles['box']}>stylBox</div>
//         </div>
//     </div>
// }

// export default App
// import React, { PureComponent } from "react";
import '@/App.css'
import React, { lazy, Suspense, useState } from 'react'
// import lessStyles from '@/app.less'
// import scssStyles from '@/app.scss'
// import stylStyles from '@/app.styl'
// import bigImg from '@/assets/images/fengjing.jpg'
// import memberList from './test.json'
// import { Demo1, Demo2 } from '@/components'

// const LazyDemo = lazy(() => import('@/components/LazyDemo')) // 使用import语法配合react的Lazy动态引入资源
const PreFetchDemo = lazy(
  () =>
    import(
      /* webpackChunkName: "PreFetchDemo" */
      /* webpackPrefetch: true */
      '@/components/PreFetchDemo'
    ),
)
const PreloadDemo = lazy(
  () =>
    import(
      /* webpackChunkName: "PreFetchDemo" */
      /* webpackPrefetch: true */
      '@/components/PreloadDemo'
    ),
)

function App() {
  const [show, setShow] = useState(false)
  const onClick = () => {
    setShow(true)
  }
  return (
    <>
      <h2 className='text-lg bg-black' onClick={onClick}>
        展示
      </h2>
      {/* show为true时加载组件 */}
      {show && (
        <>
          <Suspense fallback={null}>
            <PreloadDemo />
          </Suspense>
          <Suspense fallback={null}>
            <PreFetchDemo />
          </Suspense>
        </>
      )}
    </>
  )
}
export default App

// return <div>
//     <h2>webpack5-react-ts</h2>
//     <img src={bigImg} alt='小于10kb的图片' />
//     <div className={lessStyles['lessBox']}>
//         <div className={lessStyles['box']}>lessBox</div>
//     </div>
//     <div className={scssStyles['scssBox']}>
//         <div className={scssStyles['box']}>scssBox</div>
//     </div>
//     <div className={stylStyles['stylBox']}>
//         <div className={stylStyles['box']}>stylBox</div>
//     </div>
//     <Demo1 />
// </div>

// console.log(memberList);
